<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
		#main{
			margin-top: 5px;
		}
		input{
			width: 30%;
			border: 1px solid #666;
		}
		#ipt{
			width: 15%;
		}
		
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yOicZiXE59xuFaXz27eXFSPK6BEFlazx"></script>
	<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
	<title>计算驾车时间与距离</title>
</head>
<body>
	<div  id="allmap" style="height: 70%;"></div>
	<div id="main" style="height: 30%; overflow-y: scroll;">
	<label for="">起始</label>	<input type="text" id="start">
	<label for="">结束</label>	<input type="text" id="end">
	<input id="ipt" type="button" value="查询">
	<p id="text"></p>
	<div id="r-result"></div>
</body>
	</div>
	
</html>
<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("allmap");
	map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);
	var output = "";
	var	time=0
	var s=0
	var searchComplete = function (results){
		if (transit.getStatus() != BMAP_STATUS_SUCCESS){
			return ;
		}
		var plan = results.getPlan(0);
		time= plan.getDuration(true);                //获取时间
		 s= plan.getDistance(true);   
		 output='驾车大约需要:'+time+'        '+'总路程:'+s          //获取距离
	}
	var transit = new BMap.DrivingRoute(map, {renderOptions: {map: map},
		onSearchComplete: searchComplete,
		onPolylinesSet: function(){        
			setTimeout(function(){
           $('#text').html(output)
			},"1000");
	}});
	var driving = new BMap.DrivingRoute(map, {renderOptions: {map: map, panel: "r-result", autoViewport: true}});
	$('#ipt').click(function(){
	  var start=$('#start').val()
	  var end=$('#end').val()	
	  transit.search(start, end);	 
	  driving.search(start, end);	
	})

	

</script>
